<template>
	<view class="chat_wrapper">
		<view class="chat_list" v-if="chatList.length > 0">
			<view class="chat_item" v-for="item in chatList" :key="item.id" @click="GotoChat(item.id)">
				<view class="picture">
					<img :src="item.cover" alt="" @error="tabErrorPicture(item.id)" />
				</view>
				<view class="chat_intro">
					<view class="title">{{item.title}}<text class="time">{{item.time}}</text></view>			
					<view class="time">{{item.update_time}}</view>					
				</view>
			</view>
			<view class="noMore">没有更多数据了哦~~</view>
		</view>
		<view class="noData" v-else>
			<i class="iconfont icon-zanwushuju"></i>
			<text class="name">暂无数据</text>
		</view>
	</view>
</template>

<script>
	import { api_getChatList } from '@/api/api'
	export default {
		data() {
			return {
				chatList: [],
				errorProduct: require('@/static/img/default_image.jpg'), 
			}
		},
		onLoad(){
			this.init();
		},
		methods: {
			init(){
				uni.showLoading({ title: '数据加载中...' });
				api_getChatList().then(res => {
					let { code,data:{list},msg } = res;
					uni.hideLoading();
					if (code == 1) {
						this.chatList = list;
						console.log('chat',this.chatList);
					} else {
						uni.showToast({ title: msg,icon: 'error' })
					}
				}).catch(err => {
					uni.hideLoading();
					console.log(err);
				})
			},
			tabErrorPicture(id){	// 学习记录列表图片加载失败
				let i = this.chatList.findIndex(v => v.id == id);
				this.chatList[i].cover = this.errorProduct;		
			},
			GotoChat(id){	// 进入聊天
				uni.navigateTo({ url: `/pages/chat_window/index?orderid=${id}` });
			},
			nanoid(len = 6) {  // 生成随机数
			    if (len <= 11) {
			        return Math.random().toString(36).slice(2,2+len).padEnd(len,'0')   
			    } else {
			        return this.nanoid(11) + this.nanoid(len - 11)   
			    }    
			}
		}
	}
</script>

<style lang="scss" scoped>
.chat_wrapper{
	.chat_list{
		.chat_item{
			display: flex;		
			padding: 10px 10px 10px 15px;
			box-sizing: border-box;
			border-bottom: 1px solid #fafafa;
			margin: 0 0 10px 0;
			.picture{
				width: 60px;
				height: 60px;
				overflow: hidden;
				img{
					display: block;
					width: 60px;
					height: 60px;
					margin: 0;
				}
			}
			.chat_intro{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: calc(100vw - 80px);
				padding: 0 0 0 10px;
				box-sizing: border-box;
				.title{
					font-size: 15px;				
				}
				.time{
					font-size: 12px;
					padding: 5px 0;
					color: #ccc;
				}
			}
		}
		.noMore{
			font-size: 14px;
			text-align: center;
			color: #ccc;
			margin: 20px 0 0;
		}
	}
	.noData{
		padding: 50px 0 0;
		margin: 0 auto;
		text-align: center;
		.iconfont{
			display: block;
			margin: 0 auto;
			font-size: 100px;
			color: gray;
		}
		.name{
			font-size: 14px;
			color: #999;
		}
	}
}
</style>
